<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.6.10/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.6.10/themes/icon.css" />
    <script type="text/javascript" src="../js/jquery-easyui-1.6.10/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery-easyui-1.6.10/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
</head>

<body>
    <table id="dg"></table>

    <div id="dlg" class="easyui-dialog" title="数据操作" data-options="iconCls:'icon-save',closed: true" style="width:600px;height:600px;padding:10px;position: relative;z-index:999;">
        <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="_id" style="width:100%" />
            </div>
            <!-- 名字 -->
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'用户名称:',required:true" />
            </div>
            <!-- 名字 -->
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="password" style="width:100%" data-options="label:'用户密码:',required:true" />
            </div>
            <!-- 年龄 -->
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="age" style="width:100%" data-options="label:'用户年龄:',required:true" />
            </div>

            <!-- 身高 -->
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" id="hight" name="hight" style="width:100%" data-options="label:'用户身高:',required:true" />
            </div>
            <!-- 体重 -->
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" id="weight" name="weight" style="width:100%" data-options="label:'用户体重:',required:true" />
            </div>
            <!-- 婚配 -->
            <div style="margin-bottom:10px">
                <span style="padding-right:20px;">用户婚配</span>
                <input type="radio" name="marry" id="marryed"><span style="padding-right:20px;">是</span>
                <input type="radio" name="marry" id="unmarry"><span>否</span>
            </div>
            <!-- 地址 -->
            <div style="margin-bottom:10px">
                <span style="padding-right:20px;">用户地址</span>
                <select class="easyui-combobox" name="language" style="width: 150px;">
                  <option value="ar" selected="selected">浙江</option>
                  <option value="bg">上海</option>
                  <option value="ca">福建</option>
                  <option value="zh-cht">江苏</option>
                  <option value="cs">北京</option>
                  <option value="da">安徽</option>
                  <option value="nl">河北</option>
                  <option value="en" >江西</option>
                  <option value="et">河南</option>
                  <option value="fi">广东</option>
                  <option value="fr">广西</option>
                  <option value="de">海南</option>
                  <option value="el">甘肃</option>
                  <option value="ht">内蒙古</option>
                </select>
            </div>
            <!-- 工作 -->
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="job" style="width:100%" data-options="label:'用户工作:',required:true" />
            </div>
            <!-- 手机 -->
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="phone" style="width:100%" data-options="label:'用户手机:',required:true" />
            </div>
            <!-- 邮箱 -->
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" name="email" style="width:100%" data-options="label:'用户邮箱:',required:true" />
            </div>

        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a
        >
        <a
          href="javascript:void(0)"
          class="easyui-linkbutton"
          onclick="clearForm()"
          style="width:80px"
          >Clear</a
        >
      </div>
    </div>
  </body>
</html>

<script>
 
  function submitForm() {
    $('#ff').form('submit', {
      onSubmit: function(e) {
        if (
          $(this)
            .form('enableValidation')
            .form('validate')
        ) {
          var formData = $('#ff').serializeJSON();
         
          console.log($(".textbox-value").val());
           formData.address=$("#_easyui_textbox_input10").val();
          
          formData.hight=$('#hight').val()+'cm';
          formData.weight=$('#weight').val()+'kg';
          if($('#marryed').is(':checked')){
            formData.marry='是'
          }else{
            formData.marry='否'
          }
          console.log(formData);
          if ($('#ff').serializeJSON()._id) {
            $.ajax({
              url: `http://localhost:3000/users/${formData._id}`,
              type: 'put',
              data: formData
            }).done(function(res) {
              $('#dlg').dialog('close');
              $('#dg').datagrid('reload');
              $('#ff').form('clear');
            });
          } else {
            // 新增的时候不得有_id
            delete formData._id;

            $.ajax({
              url: 'http://localhost:3000/users',
              type: 'post',
              data: formData
            }).done(function(res) {
              $('#dlg').dialog('close');
              $('#dg').datagrid('reload');
              $('#ff').form('clear');
            });
          }
        }
        return false;
      }
    });
  }
  function clearForm() {
    $('#ff').form('clear');
  }

  $('#dg').datagrid({
    url: 'http://localhost:3000/users/list',
    fit: true,
    pagination: true,
    toolbar: [
      {
        text: '添加数据',
        iconCls: 'icon-add',
        handler: function() {
          $('#dlg').dialog('open');
        }
      },
      '-',
      {
        text: '删除数据',
        iconCls: 'icon-cut',
        handler: function() {
          deleteDatas();
        }
      }
    ],
    columns: [
      [
        { field: 'ck', checkbox: true },
        { field: 'name', title: '姓名', width: 100 },
        { field: 'password', title: '密码', width: 100 },
        { field: 'age', title: '年龄', width: 50 },
        { field: 'hight', title: '身高', width: 50 },
        { field: 'weight', title: '体重', width: 50 },
        { field: 'marry', title: '婚配', width: 50 },
        { field: 'address', title: '地址', width: 100 },
        { field: 'job', title: '工作', width: 100 },
        { field: 'phone', title: '手机', width: 150 },
        { field: 'email', title: '邮箱', width: 150 },
        {
          field: '_id',
          title: '操作',
          width: 80,
          formatter: function(value, row, index) {
            return `<a href="#" onclick="editData('${
              row._id
            }')">修改</a> <a href="#" onclick="deleteData('${
              row._id
            }')">删除</a>`; } } ] ], onDblClickRow: function(index, row) { console.log(index, row); } }); function deleteData(id) { $.messager.confirm('确认框', '你确认删除该数据?', function(r) { if (r) { $.ajax({ url: `http://localhost:3000/users/${id}`, type: 'delete'
            }).done(function(res) { $('#dg').datagrid('reload'); }); } }); } function editData(id) { $.ajax({ url: `http://localhost:3000/users/${id}`, type: 'get' }).done(function(res) { $('#ff').form('load', res); $('#dlg').dialog('open'); }); } function
            deleteDatas() { var dgSelections = $('#dg').datagrid('getSelections'); var ids = []; for (var i = 0; i
            < dgSelections.length; i++) { ids.push(dgSelections[i]._id); } console.log(ids.toString()); } </script>